<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			选择器优先级
		</title>
		<style>
			.rect {
				position: fixed;
				top: calc(50% - 50px);
				left: calc(50% - 50px);
				width: 100px;
				height: 100px;
				background-color: red;
				border: #000000 1px solid;
			}
			pre {
				font-size: 15px;
			}
			
			/* 0 级别 */
			*.rect {
				background-color: orange;
			}
			
			/* 1 级别 */
			div.rect {
				background-color: yellow;
			}
			
			/* 2 级别 */
			[class="rect"].rect {
				background-color: lightgreen;
			}
			
			/* 3 级别 */
			#rect.rect {
				background-color: darkturquoise;
			}
			
			/* 5 级别 */
			*.rect {
				background-color: violet !important;
			}
			
		</style>
	</head>
	<body>
		<pre>优先级：
		0级	橙	通配选择器*、选择符(+、>、~、空格、||（列选择器）)、逻辑组合伪类
		1级	黄	标签选择器
		2级	绿	类选择器、属性选择器、伪类
		3级	青	ID选择器
		4级	蓝	内联样式
		5级	紫	!important（除了覆盖【4级 style内联样式】，任何其他情况都不推荐使用）</pre>
		<p>以彩虹色排列，红为起点（默认色）</p>
		<p>css 优先级为不进位的同级别叠加</p>
		<div class="rect" id="rect" style="background-color: #0000FF;">目标方块</div>
	</body>
</html>
